<template>
  <div id="PKtalent">
    <div class="titleBox">
      <img src="@/assets/wang/live/mai.png" alt="" />
      <span>连麦PK达人</span>
    </div>
    <table class="table">
      <thead>
        <tr>
          <th>PK达人</th>
          <th>PK达人行业</th>
          <th>达人粉丝增量</th>
          <th>PK达人粉丝增量</th>
          <th>开始时间-结束时间</th>
          <th>连麦时长</th>
          <th>PK音浪对比</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <div class="talentBox">
              <img src="@/assets/wang/video/eg.png" class="avatorBox" />
              <div class="talentRight">
                <div>
                  <span>四川观察四川观察四川观察</span>
                  <img src="@/assets/meng/search_result02.png" />
                  <!-- <img
                    v-if="item.verifyType == 2"
                    src="@/assets/meng/search_result03.png"
                  /> -->
                </div>
                <p>粉丝数：{{ format_num(789456123) }}</p>
              </div>
            </div>
          </td>
          <td>知识资讯</td>
          <td>
            <!-- 0的话没有箭头 -->
            <div class="rateBox">
              <img src="@/assets/wang/live/up01.png" v-if="rate > 0" />
              <img src="@/assets/wang/live/down01.png" v-if="rate < 0" />
              <span :class="{ up: rate > 0, down: rate < 0 }">{{
                format_num(Math.abs(rate))
              }}</span>
            </div>
          </td>
          <td>
            <!-- 0的话没有箭头 -->
            <div class="rateBox">
              <img src="@/assets/wang/live/up01.png" v-if="rate > 0" />
              <img src="@/assets/wang/live/down01.png" v-if="rate < 0" />
              <span :class="{ up: rate > 0, down: rate < 0 }">{{
                format_num(Math.abs(rate))
              }}</span>
            </div>
          </td>
          <td>12:23:12-12:34:21</td>
          <td>11分钟</td>
          <td>9326 / 1.1w</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  name: "PKtalent",
  components: {},
  data() {
    return {
      rate: -789456125,
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},

  methods: {},
};
</script>
<style lang='less' scoped>
#PKtalent {
  padding-top: 30px;
  table {
    margin-top: 29px;
    thead {
      tr {
        th:nth-of-type(1) {
          width: 20%;
          text-align: left;
          padding-left: 3.5%;
        }
      }
    }
    tbody {
      tr {
        height: 81px;
        td {
          text-align: center;
        }
        td:nth-of-type(2),
        td:nth-of-type(6) {
          font-size: 14px;
          color: #222222;
        }
        td:nth-of-type(5),
        td:nth-of-type(7) {
          font-family: DINAlternate-Bold;
        }
      }
      .talentBox {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding-left: 17.5%;
        .avatorBox {
          width: 50px;
          height: 50px;
          border-radius: 50%;
        }
        .talentRight {
          margin-left: 14px;
          div {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            span {
              font-size: 16px;
              color: #222222;
              font-weight: 600;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 1;
              -webkit-box-orient: vertical;
            }
            img {
              width: 16px;
              height: 16px;
              border-radius: 50%;
              margin-left: 7px;
            }
          }
          p {
            font-size: 14px;
            color: #555555;
            padding-top: 4px;
            text-align: left;
          }
        }
      }
      .rateBox {
        display: flex;
        justify-content: center;
        align-items: center;
        img {
          width: 8px;
          height: 12px;
        }
        span {
          font-size: 16px;
          color: #888888;
          font-weight: 600;
          padding-left: 6px;
        }
        .up {
          color: #ea1b0b !important;
        }
        .down {
          color: #1779ff !important;
        }
      }
    }
  }
}
</style>